<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>2.watch侦听器 属性</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // computed和watch都能实现的功能建议用computed, 因为computed有缓存
    // 创建一个vue实例
    const app = Vue.createApp({
      data() {
        return {
          message: 'hello World',
          count: 10,
          price: 20,
          newTotal: 0
        }
      },
      // 只有相关联的属性发生改变computed中的值才会改变
      computed: {
        total() {
          return Date.now() + this.count
        }
      },
      // TODO: 研究一下deep和
      watch: {
        // price(newValue, oldValue){
        //   this.newTotal = newValue * this.count
        // }
        price: {
          handler(newValue, oldValue) {
            console.log('==========>初始化会监听==>immediate');
            console.log('添加deep和immediate要注意, 子组件也要加,如果子组件不加immediate,子组件将不会初始化被调用,除非在mounted方法里写');
            this.newTotal = newValue * this.count
          },
          immediate: true
        }
      },
      mounted() {
      },
      methods: {
        handleClick() {
          this.message = '哈哈'
        },
        // 只要页面刷新这里的值就会更新这是和computed的区别
        getTotal() {
          return Date.now() + this.count
          // return this.count * this.price
        }
      },
      template:'<div @click="handleClick"><span>{{message}}-{{newTotal}}</span><hr/></div>'
    })
    // 挂载到root的id元素上
    const vm = app.mount('#root')
    // 在控制台可以通过vm来访问它如vm.$data.message或vm.message
  </script>
</html>